<script type="text/javascript">
	
	function showHideDiv(showid,hideid) {
		$('#'+showid).show();
		$('#'+hideid).hide();
	}

	function showDirections(storeAddress) {
	
		document.getElementById('contextual_panel').innerHTML="";
		
		var start = document.getElementById('userAddressInput').value;
		var end = storeAddress;
		var request = {
			origin: start,
			destination: end,
			travelMode: google.maps.TravelMode.DRIVING
		};
		
		directionsService.route(request, function(response, status) {
			if (status == google.maps.DirectionsStatus.OK) {
			  directionsDisplay.setDirections(response);
			}
		});
	}
	
	showHideDiv('contextual_panel','loading');
</script>

<b>Click a store for directions:</b><br><br>

{{if storeData == "null":}}
	<script type="text/javascript">
		alert("Sorry, I was unable to find a store near your address. {{=error}}");
		console.log("{{=apistatus}}");
	</script>
{{else:}}
	{{for store in storeData:}}
		<a class="clickable" onclick="showDirections('{{=store[1]}}')">{{=store[0]}} - {{=store[5]}}</a><br>
	{{pass}}
{{pass}}